<route lang="json5">
{
  style: {
    navigationBarTitleText: '还书',
    navigationStyle: 'custom',
    disableScroll: true,
    // #ifdef MP-ALIPAY
    enablePullDownRefresh: false,
    'mp-alipay': {
      allowsBounceVertical: 'NO',
      transparentTitle: 'always',
      titlePenetrate: 'YES',
      defaultTitle: '',
    },
    // #endif
  },
}
</route>
<template>
  <CustomNavbar :title="'还书'" />
  <view class="uni-margin-wrap">
    <view class="type-box">
      <view class="text" v-for="(item, index) in typeList" :key="item" @tap="clickType(index)">
        <text>{{ item }}</text>
      </view>
    </view>
    <uni-transition
      ref="cursor"
      custom-class="custom-transition"
      :show="true"
      mode-class="slide-left"
    />
    <swiper class="swiper" :current="activeIndex" @change="changeSwiper">
      <swiper-item class="swiper-item" v-for="(pageDataItems, index) in dataList" :key="index">
        <scroll-view
          :scroll-top="scrollTop"
          :scroll-y="true"
          class="scroll-Y"
          refresher-enabled
          :refresher-triggered="isTriggered"
          @refresherrefresh="upper"
          @scrolltolower="lower"
        >
          <uni-card
            :title="'《' + recordItem.bookName + '》'"
            :sub-title="recordItem.status != 0 ? '借阅人：' + recordItem.borrowUserName : ''"
            :extra="recordItem.statusStr"
            :thumbnail="recordItem.bookAvatar"
            v-for="recordItem in pageDataItems"
            :key="recordItem.id"
          >
            <view class="options">
              <text>到期时间: {{ recordItem.deadline }}</text>
              <button
                v-if="
                  recordItem.status === OrderStatus.APPROVE ||
                  recordItem.status === OrderStatus.EXCEEDING
                "
                class="mini-btn .button1"
                hover-class="button-active"
                size="mini"
                @tap="toReturn1(recordItem)"
              >
                归还
              </button>
            </view>
            <view class="remarks">
              <image
                v-if="recordItem.status != 0"
                style="width: 60rpx; height: 60rpx; border-radius: 50%"
                :src="recordItem.borrowUserAvatar"
                mode="scaleToFill"
              />
              <text v-if="recordItem.status != 0" class="uni-body">
                &nbsp;: {{ recordItem.remark }}
              </text>
            </view>
          </uni-card>
          <uni-load-more
            v-if="pageDataItems.length > 7"
            class="loading-text"
            :status="loadingStatus"
            :content-text="MORE_MSG_OBJ"
          />
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script lang="ts" setup>
import CustomNavbar from '@/components/CustomNavbar.vue'
import { MORE_MSG_OBJ } from '@/store/contants'
import { useUserStore } from '@/store/user'
import { myOrderListApi, updateStatusApi } from '@/service/order'
import { OrderStatus, OrderDirection } from '@/enums/OrderStatus'
import { Book } from '@/types/book'
import { Order } from '@/types/order'
import { PageParam } from '@/types/global'

const activeIndex = ref(0)
const cursor = ref()
const userInfo = useUserStore().userInfo

const loadingStatus = ref()

const typeList = ['全部', '借阅中', '已逾期', '已完成']

const scrollTop = ref(0)
const isTriggered = ref(false)
// const guessRef = ref<GuessInstance>()
const allPageParams: Required<PageParam> = { page: 1, size: 10 }
const borrowPageParams: Required<PageParam> = { page: 1, size: 10 }
const expiredPageParams: Required<PageParam> = { page: 1, size: 10 }
const returnedPageParams: Required<PageParam> = { page: 1, size: 10 }

const applyReturnList = [
  {
    id: 1,
    avatar: 'https://upload.anqu.com/20170802/1501635793201245.png',
    bookAvatar:
      'https://bkimg.cdn.bcebos.com/pic/42166d224f4a20a44623e5e4a5068f22720e0cf37ac1?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080',
    name: '兰陵王',
    type: 5,
    bookName: '放风筝的人',
    status: '申请还书',
    time: '2024-12-22',
    remark: '拿来把你',
  },
]

const borrowList = [
  {
    id: 2,
    avatar: 'https://upload.anqu.com/20170802/1501635793201245.png',
    bookAvatar:
      'https://bkimg.cdn.bcebos.com/pic/d53f8794a4c27d1ec0f7b3dc18d5ad6edcc438d0?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080',
    name: '兰陵王',
    type: 4,
    bookName: '反脆弱',
    status: '借阅中',
    time: '2024-12-22',
    remark: '拿来把你',
  },
  ...applyReturnList,
]

const expiredList = [
  {
    id: 3,
    avatar:
      'https://img0.baidu.com/it/u=2517761444,1512515278&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=502',
    bookAvatar:
      'https://bkimg.cdn.bcebos.com/pic/eac4b74543a982268656b1828d82b9014b90eb84?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080',
    name: '鲁班七号',
    type: 7,
    bookName: '三体',
    status: '已逾期',
    time: '2024-12-22',
    remark: '借两天看看',
  },
]

const returnedList = [
  {
    id: 4,
    avatar: 'https://q1.itc.cn/images01/20240316/db2a767e003d423ea8065cb0a07b75e1.jpeg',
    bookAvatar:
      'https://bkimg.cdn.bcebos.com/pic/ca1349540923dd54564eed81db51a4de9c82d058e298?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080',
    name: '孙策',
    type: 1,
    bookName: '三国演义',
    status: '已完成',
    time: '2024-12-22',
    remark: '借两天，谢谢',
  },
]
// let allList = ref([...expiredList, ...borrowList, ...returnedList])
// let dataList = ref([allList.value, borrowList, expiredList, returnedList])
const allList = ref<Order[]>()
const dataList = ref<Order[][]>()

onLoad(async () => {
  const allList = await myOrderListApi({
    direction: OrderDirection.INPUT,
    status:
      OrderStatus.APPROVE +
      ',' +
      OrderStatus.EXCEEDING +
      ',' +
      OrderStatus.RETURN +
      ',' +
      OrderStatus.DONE,
    page: allPageParams.page,
    size: allPageParams.size,
  })
  const borrowList = await myOrderListApi({
    direction: OrderDirection.INPUT,
    status: OrderStatus.APPROVE + ',',
    page: borrowPageParams.page,
    size: borrowPageParams.size,
  })
  const expiredList = await myOrderListApi({
    direction: OrderDirection.INPUT,
    status: OrderStatus.EXCEEDING + ',',
    page: expiredPageParams.page,
    size: expiredPageParams.size,
  })
  const returnedList = await myOrderListApi({
    direction: OrderDirection.INPUT,
    status: OrderStatus.DONE + ',',
    page: returnedPageParams.page,
    size: returnedPageParams.size,
  })
  dataList.value = [
    allList.data.records,
    borrowList.data.records,
    expiredList.data.records,
    returnedList.data.records,
  ]
  console.log(dataList.value)
})

const toReturn1 = async (order: Order) => {
  uni.showLoading({ title: '请稍后...' })
  const updateStatusRes = await updateStatusApi({ id: order.id, status: OrderStatus.RETURN })
  console.log('updateStatus res', updateStatusRes)
  order.status = updateStatusRes.data.status
  order.statusStr = updateStatusRes.data.statusStr
  uni.hideLoading()
  uni.showToast({
    title: '已提交',
    mask: true,
  })
}

const clickType = (index: number) => {
  activeIndex.value = index
  cursor.value.step(
    {
      translateX: activeIndex.value * 120 + '%',
    },
    {
      delay: 0,
      duration: 200,
      timingFunction: 'linear',
      needLayout: false,
      transformOrigin: '',
    },
  )
  cursor.value.run()
}

const changeSwiper = (ev) => {
  activeIndex.value = ev.detail.current
  cursor.value.step(
    {
      translateX: activeIndex.value * 120 + '%',
    },
    {
      delay: 0,
      duration: 200,
      timingFunction: 'linear',
      needLayout: false,
      transformOrigin: '',
    },
  )
  cursor.value.run()
}

// 触发下拉刷新
const upper = async () => {
  console.log('下拉刷新')
  isTriggered.value = true
  // 加载数据 api 要加 await
  // ...
  // await Promise.all([guessRef.value?.resetData()])
  setInterval(() => {
    isTriggered.value = false
  }, 1000)
}
const lower = () => {
  console.log('lower')
  // guessRef.value?.getMore()
}
</script>

<style lang="scss">
.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

.type-box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 10rpx;
  font-size: 33rpx;
}

.type {
  border-bottom: 1px solid red;
}

// .cursor {
// }

.text {
  width: 25%;
  text-align: center;
}
/* 如果使用 scss 需要使用 /deep/  */
.custom-transition {
  position: absolute;
  width: 22%;
  height: 7rpx;
  margin-top: 7rpx;
  background-color: $main-color;
}

.swiper {
  height: calc(100vh - var(--window-top));
  margin-top: 10rpx;

  .swiper-item {
    .uni-body {
      font-size: 32rpx;
      color: #a5a5a5;
    }
  }
}

.options {
  width: 100%;
  height: 60rpx;
  margin-bottom: 10rpx;
  line-height: 70rpx;

  text {
    font-size: 28rpx;
    color: $main-color-hight;
  }

  .button1 {
    float: right;
    margin-left: 20rpx;
    font-size: 30rpx;
    color: #fff;
    background-color: $main-color-hight;
  }
  .button2 {
    float: right;
    font-size: 30rpx;
    color: #fff;
    background-color: $main-color-hight;
  }

  .button-active {
    background-color: $main-color; /* 点击时的背景颜色 */
  }
}
.remarks {
  width: 70%;
  margin-left: 5%;
}

.scroll-Y {
  width: 100%;
  height: calc(100vh - var(--window-top));
}
</style>
